<template>
  <div>
    <h1>HOME</h1>
    <div>
      <button @click="toNews">新闻</button>
      <button @click="toMusic">音乐</button>
      <button @click="toGame">游戏</button>
    </div>
    <div>
      <button @click="toNewsReplace">新闻Replace</button>
      <button @click="toMusicReplace">音乐Replace</button>
      <button @click="toGameReplace">游戏Replace</button>
    </div>
    <div>
      <button @click="$router.go(-2)">回退2</button>
      <button @click="$router.back()">后退1</button>
      <button @click="$router.forward()">前进1</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home',
  /* 
    //编程式路由导航中重复导航抛出错误的处理方式
      1. 因为push或者replace方法只书写第一个参数location的时候,则会返回promise实例,我们直接使用catch(()=>{})处理即可
      2. push或者replace可以接受第二个和第三个参数,都是回调函数,用来处理成功和失败
  
  */
  methods: {
    toNews() {
      this.$router.push('/home/news');
    },
    toMusic() {
      this.$router.push({
        path: '/home/music',
      });
    },
    toGame() {
      this.$router.push({
        name: 'Game',
      });
    },
    toNewsReplace() {
      this.$router.replace('/home/news');
    },
    toMusicReplace() {
      this.$router.replace('/home/music');
    },
    toGameReplace() {
      this.$router.replace('/home/game');
    },
  },
};
</script>

<style></style>
